<template>
  <div class="menu-container-mask" @click="close">
    <div class="menu-container" :style="style">
      <div class="menu-item"
          v-for="item in menuItems" @click.stop="() => itemClick(item)">
        {{ item.name }}
      </div>
    </div>
  </div>

</template>
<script setup>
import {computed} from 'vue';

defineOptions({
  name: 'MenuContext'
});
const emits = defineEmits(['menuItemClick', 'close']);
const props = defineProps({
  left: {
    type: Number,
    default: 0
  },
  top: {
    type: Number,
    default: 0
  },
  menuItems: {
    type: Array,
    defualt: () => []
  }
});

function close() {
  emits('close');
}
function itemClick(item) {
  emits('menuItemClick', item);
}

const style = computed(() => {
  return {
    top: `${props.top}px`,
    left: `${props.left}px`
  };
});
</script>
<style lang="scss">
.menu-container {
  position: fixed;
  min-width: 270px;
  background: white;
  //border: 1px solid #CDD0D6;
  user-select: none;
  border-radius: 4px;
  padding: 5px 0;
  box-shadow: 0 0 10px #CDD0D6;
}

.menu-container-mask {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.menu-item:hover {
  background: aliceblue;
}
.menu-item {
  cursor: pointer;
  padding: 5px 10px;
  color: #606266;
  width: 100%;
  box-sizing: border-box;
}
</style>